<script setup lang="ts">
import { watch, reactive } from 'vue';

const props = defineProps<{
  item: FlowPathTemplateApi.AttributeExtendDto;
}>();

//局部
const state = reactive<{
  imageList: { key: string; src: string }[];
}>({
  imageList: [],
});
watch(
  () => props.item.attributeValue,
  () => {
    state.imageList = getImageList(props.item);
  },
);

/**
 * 获取 “，”分隔的图片地址例如: https://xxxx/1.png,https://xxxx/2.png,https://xxxx/3.png
 */
function getImageList(item: FlowPathTemplateApi.AttributeExtendDto) {
  if (!item.attributeValue) {
    return [];
  }
  const imageList = item.attributeValue.split(',');

  return imageList.map((fileUrl, index) => {
    return {
      key: item.id || '' + index,
      src: fileUrl,
    };
  });
}
</script>
<!--2-图片 -->
<template>
  <!--只读 -->
  <template v-if="item.readonlyAble === 1">
    <nut-cell :title="item.attributeName">
      <template #link>
        <app-upload-image :readonly="true" :default-image-list="getImageList(item)" />
      </template>
    </nut-cell>
  </template>
  <!--编辑 -->
  <template v-else>
    <nut-form-item
      :label="item.attributeName"
      :required="item.attributeRequired === 1"
      :label-width="120"
    >
      <app-upload-image
        @on-change="
          (imgList) => {
            item.attributeValue = imgList.map((item) => item.src).join(',');
          }
        "
        :max="9"
        :default-image-list="state.imageList"
        module="approval"
      />
    </nut-form-item>
  </template>
</template>
